<template>
  <div>
    <el-container style="height: 100vh">
      <el-aside width="150px">
        <el-menu
            class="el-menu-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            style="height: 100%"
        >
          <el-menu-item index="1" @click="goToGoodsManage">货物管理</el-menu-item>
          <el-menu-item index="2" @click="goToClientManage">客户管理</el-menu-item>
          <el-menu-item index="3" @click="goToContract">购销合同</el-menu-item>
          <el-menu-item index="4" @click="goToUser">用户设置</el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <h1>
            汽车网络销售平台&nbsp;&nbsp;&nbsp;&nbsp;欢迎您,{{ user.name }}
          </h1>
        </el-header>
        <el-main>
          <el-card>
            <router-view></router-view>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

interface User {
  name: string;
}

export default defineComponent({
  name: 'Home',
  setup() {
    const router = useRouter();
    const route = useRoute();
    const user = reactive<User>({ name: '' });

    onMounted(() => {
      if (!route.params.user) {
        const localUser = localStorage.getItem('user');
        if (localUser) {
          user.name = JSON.parse(localUser).name;
        }
      } else {
        user.name = (route.params.user as string);
        localStorage.setItem('user', JSON.stringify({ name: user.name }));
      }
    });

    const goToGoodsManage = () => {
      router.push({ path: '/home/goodsManage' });
    };

    const goToClientManage = () => {
      router.push({ path: '/home/clientManage' });
    };

    const goToContract = () => {
      router.push({ path: '/home/contract' });
    };

    const goToUser = () => {
      router.push({ path: '/home/user' });
    };

    return {
      user,
      goToGoodsManage,
      goToClientManage,
      goToContract,
      goToUser,
    };
  },
});
</script>

<style lang="css" scoped>
</style>
